<template>
	<div ref="gauge" style="width: 100%;height: 100%;"></div>
</template>

<script lang="ts" setup>
	import * as echarts from 'echarts';
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';

	const props = defineProps(['gaugeValue', 'gaugeColor', 'calendarTitle'])
	const gauge = ref<any>(null);
	const instrument = () => {
		setTimeout(() => {
			var value = props.gaugeValue;
			console.log(value)
			let option = {
				// backgroundColor: '#031245',
				tooltip: {
					trigger: 'item'
				},
				angleAxis: {
					show: false,
					max: 100 * 360 / 270,
					type: 'value',
					startAngle: 225,
					splitLine: {
						show: false
					}
				},
				//圆环宽度
				barMaxWidth: 12,
				radiusAxis: {
					show: false,
					type: 'category',
				},

				polar: {
					//圆环大小
					radius: "160%"
				},
				title: [
					{
						text: '',
						x: "50%",
						y: "50%",
						textAlign: "center",
						textStyle: {
							fontWeight: "normal",
							fontSize: "22",
							fontFamily: "SourceHanSansCN-Medium",
							color: "#ffffff",
						},
					},
					{
						text: value,
						x: "47%",
						y: "60%",
						textAlign: "center",
						textStyle: {
							fontWeight: "normal",
							fontSize: "16",
							fontFamily: "SourceHanSansCN-Medium",
							color: "#fff",
						},
					},
				],
				series: [{
					type: 'bar',
					data: [{
						value: value,
						itemStyle: {
							color: props.gaugeColor
						},
					}],
					barGap: '-100%',
					coordinateSystem: 'polar',
					roundCap: true,
					z: 2,
					animationDuration: 2000
				},
				{ //底层圆环
					type: 'bar',
					data: [{
						value: 100,
						itemStyle: {
							color: '#0d4698'
						}
					}],
					barGap: '-100%',
					coordinateSystem: 'polar',
					roundCap: true,
					z: 1,
					animation: false
				},
				{

					type: 'gauge',
					radius: "85%",
					//起始
					startAngle: 225,
					//终止
					endAngle: -45,
					axisLine: {
						show: false,
					},
					splitLine: {
						show: 0,
						length: 15
					},
					axisTick: {
						show: 1,
						lineStyle: {
							color: "#42e4fb"
						}
					},
					axisLabel: {
						show: 1,
						fontSize: 12,
						distance: 4,
						color: "#42e4fb"
					},
					animationDuration: 2000,
					pointer: {
						show: 1,
						length: '50%',
						width: 5
					},
					itemStyle: {
						color: "#2a70b9"
					},
					detail: {
						show: 0
					},
					data: [{
						value: value,
						name: ''
					}]
				}
				]
			};
			const Chart = echarts.init(gauge.value);
			Chart.setOption(option);
			window.addEventListener('resize', () => {
				//页面大小变化后Echarts也更改大小 
				Chart.resize();
			});
		}, 10)
	}
	onMounted(() => {
		nextTick(() => {
			instrument()
		})
	});
</script>

<style>
</style>